<template>
	<el-dialog
		:model-value="dialogVisible"
		title="添加用户"
		width="500"
		:before-close="handleClose"
	>
		<el-form
			ref="formRef"
			:model="form"
			label-width="70px"
			@submit.prevent="handleConfirm"
		>
			
			<el-form-item label="用户昵称">
				<el-input v-model="form.userName" :span="8" />
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input
					v-model="form.email"
					:span="8"
				/>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input
					v-model="form.phoneNumber"
					:span="8"
				/>
			</el-form-item>
			<el-form-item label="年龄">
				<el-input v-model="form.age" :span="8" />
			</el-form-item>
			<el-form-item style="margin-left: -68px">
				<el-text style="padding-right: 12px">用户身份</el-text>
				<el-select
					v-model="form.permissionName"
					placeholder="Select"
					style="width: 398px; height: 32px"
				>
					<el-option
						v-for="(item, index) in options"
						:key="index"
						:label="item.label"
						:value="item.value"
						:disabled="item.disabled"
					/>
				</el-select>
			</el-form-item>
			<el-text class="mx-1" type="info">
				创建时间：{{ formatDateTime(new Date()) }}
			</el-text>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" @click="handleConfirm">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { defineEmits, ref, reactive } from 'vue'
import { reqAddUser } from '@/api/user/userInfo'
import type { UserAddInfo } from '@/api/user/userInfo'
import { formatDateTime } from '@/utils/formatDate'
import { options } from './options'

const dialogVisible = ref(false)
const form = reactive<UserAddInfo>({
	passWord: '11111',
	userName: '张三',
	permissionName: '普通用户',
	email: '125331521@qq.com',
	phoneNumber: '12843657869',
	age: 20,
	isDeleted: 0,
})

const formRef = ref(null)
const emits = defineEmits(['update:modelValue', 'form-submitted'])

const handleConfirm = () => {
	console.log(form)
	reqAddUser(form)
	emits('form-submitted', form)
	handleClose()
}
const handleClose = () => {
	emits('update:modelValue', false)
}
</script>
<style>
.el-input {
	width: 398px;
	height: 30px;
}
.el-select {
	width: 398px;
	height: 30px;
}
</style>
